<template>
    <div v-if="total > 0 || (total === 0 && !hideWhenTotal0)" class="pagination-wrap">
        <el-pagination
            @current-change="handleCurrentPageChange"
            @size-change="handlePageSizeChange"
            :current-page="currentPage"
            :page-sizes="PAGE_SIZES"
            :page-size ="pageSize"
            background
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
        />
    </div>
</template>
<script>
/**
 * @author wangzhixiang
 * @description 通用分页组件
 */

import { PAGE_SIZES, DEFAULT_PAGE_SIZE } from '@/const'

export default {
    name: 'pagination',
    props: {
        // 当前页码
        currentPage: {
            type: Number,
            default: 1
        },
        // 多少条数据分一页
        pageSize: {
            type: Number,
            default: DEFAULT_PAGE_SIZE
        },
        // 数据总量
        total: {
            type: Number,
            default: 0
        },
        // 数据总量为零的时候，是否隐藏分页组件
        hideWhenTotal0: {
            type: Boolean,
            default: true
        }
    },
    data() {
        return {
            PAGE_SIZES: PAGE_SIZES
        }
    },
    methods: {
        // 当前页变化的回调
        handleCurrentPageChange() {
            this.$emit('currentPageChange', ...arguments)
        },
        // pageSize变化的回调
        handlePageSizeChange() {
            this.$emit('pageSizeChange', ...arguments)
        }
    }
}
</script>
<style lang="scss" scoped>
    .pagination-wrap {
        padding: 20px 0;
        text-align: center;
    }
</style>
